<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" >
        <el-descriptions title="归属管理" style="text-align: center" :column="2" border >
          <el-descriptions-item :contentStyle="contentStyle"label="资料名称" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.dataname}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="责任人员" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
           {{form.firstpeople}}</el-descriptions-item>

          <el-descriptions-item :contentStyle="contentStyle" label="存放位置" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
           {{form.position}}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions title="详细内容" style="text-align: center" :column="2" border >
          <el-descriptions-item :contentStyle="contentStyle"label="资料分类" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.category}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="二级分类" :span="1"  label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.secondclassify}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="资料条码" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{form.barcode}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="资料附件" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            <el-button @click="hadledownload">下载</el-button></el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions  title="日期备注" style="text-align: center" :column="2" border >
          <el-descriptions-item :contentStyle="contentStyle" label="创建日期" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >
            {{ form.createTime}}</el-descriptions-item>
          <el-descriptions-item :contentStyle="contentStyle" label="备注信息" :span="1" label-class-name="my-label" :labelStyle="labelStyle" >{{ form.remark }}</el-descriptions-item>

        </el-descriptions>

      </el-form>
      <br/>
      <div style="float:right; margin-bottom: 15px;">
        <el-button @click="viewCancel">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>
<style scoped>
.el-header, .el-footer {
  background-color: #FFFFFF;
  color: #333;
  text-align: left;
  line-height: 60px;
  font-style: oblique;

}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #FFFFFF;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/*对话框标题样式*/
.el-dialog__title{
  /*color: #1ab394;*/
  font-weight: bold;
  font-size: 25px;
}
</style>

<script>
import { getDatum } from "@/api/group/lck/datum";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import watermark from "watermark-dom";
import {treeselect} from "@/api/system/dept";
  export default {
    name: "Datum",
    data() {
      return {
        contentStyle:{
          'width':'200px'
        },
        form:{},
        labelStyle: { 'width': '12%','color': '#000000','text-align': 'right', },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: false,
        // 总条数
        total: 0,
        // 部门树选项
        deptOptions: undefined,
        // 合同资料表格数据
        fileList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
      };
    },
    mounted() {
      watermark.load({ watermark_txt: "  "   });
    },
    created() {
      const id = this.$route.query.id;
      if (id) {
        // 获取表详细信息

        getDatum(id).then(res => {

          this.form = res.data;
        });

      }
    },
    methods: {


      /** 关闭按钮 */
      viewCancel() {
        const id = this.$route.query.id;
        getDatum(id).then(response => {
          this.form = response.data;
        });
        const obj = { path: "/basedata/datumdata", query: {id} };
        this.$tab.closeOpenPage(obj);
      },
      hadledownload(){
        const resource=this.form.enclosure;
        console.log(this.form.enclosure+"path");
        this.$download.resource(resource);
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      }
    },
  };
</script>






